<html>
   <head>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <div id="app" >
            <div style="text-align: center;height: 50px;" v-show="!isPringting">
                <label>显示答案</label><input type="checkbox" v-model="isShowResult">
                <label>+</label><input type="checkbox" v-model="hasPlus">
                <label>-</label><input type="checkbox" v-model="hasMinus">
                <label>x</label><input type="checkbox" v-model="hasMultiply">
                <label>÷</label><input type="checkbox" v-model="hasDivision">
                <button @click="print">打印</button>
                <button @click="gentrate(count)">重新生成</button>
            </div>
            <!--startprint-->
            <div class="content" id="content">
                <div v-for="item in list" class="content-item">
                    <span>{{item.left}}</span>
                    <span>{{item.operator}}</span>
                    <span>{{item.right}}</span>
                    <span> = </span>
                    <span v-show="isShowResult">{{item.result}}</span>
                </div>
            </div>
            <!--endprint-->
        </div>
        <style>
            .content{
                width: 100%;
                display: grid;
                font-size: 25px;
                grid-template-columns: 50% 50%;
            }
            .content-item {
                width: 100%;
                text-align: center;
            }
            .content-item span {
                width: 25px;
                display:inline-block;
            }
        </style>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    list: [],
                    isShowResult: false,
                    isPringting: false,
                    hasPlus: true,
                    hasMinus: true,
                    hasMultiply: true,
                    hasDivision: true,
                    count: 50,
                    max: 100,
                    operators: []
                },
                created() {
                    this.gentrate(this.count);
                },
                methods: {
                    print () {
                        this.isPringting = true
                        setTimeout(() => {
                            window.print()
                            this.isPringting = false
                        }, 100)
                    },
                    getOperators () {
                        this.operators = []
                        if (this.hasMinus) {
                            this.operators.push(this.gentrateMinus)
                        }
                        if (this.hasPlus) {
                            this.operators.push(this.gentratePlus)
                        }
                        if (this.hasMultiply) {
                            this.operators.push(this.gentrateMultiply)
                        }
                        if (this.hasDivision) {
                            this.operators.push(this.gentrateDivision)
                        }
                    },
                    gentrate (count) {
                        this.getOperators()
                        if (this.operators.length === 0) {
                            alert('请至少选择 +、-、x、÷中的一种！')
                            return false
                        }
                        this.list = []
                        for (let i =0 ;i < count; i++){
                            this.generateOne()
                        }
                    },
                    gentratePlus () {
                        let left = parseInt(Math.random() * this.max)
                        let right = parseInt(Math.random() * this.max)
                        let result = left + right;
                        this.list.push({left,right,operator: '+', result})
                    },
                    gentrateMinus () {
                        let left = parseInt(Math.random() * this.max)
                        let right = parseInt(Math.random() * this.max)
                        if (left < right) {
                            let temp = left;
                            left = right;
                            right = temp;
                        }
                        let result = left - right;
                        this.list.push({left,right,operator: '-', result});
                    },
                    gentrateMultiply () {
                        let left = parseInt(Math.random() * this.max)
                        let right = parseInt(Math.random() * this.max)
                        let result = left * right;
                        this.list.push({left,right,operator: 'x', result});
                    },
                    gentrateDivision () {
                        let left = parseInt(Math.random() * this.max)
                        let right = parseInt(Math.random() * this.max)
                        let result = left / right;
                        if (result % 1 === 0 && right !== 0) {
                            this.list.push({left,right,operator: '÷', result});
                        } else {
                            this.gentrateDivision();
                        }
                    },
                    generateOne () {
                        let i = Math.floor(Math.random() * this.operators.length)
                        this.operators[i]()
                    }
                }
            })
        </script>
    </body>
</html>